import { useState, useEffect } from 'react'
import { Table } from 'tdesign-react'

import styles from './index.module.less'

type PropsType = {
  allDictionary: any
  eachDictionary: any
}

const DictionaryTableComponent = (props: PropsType) => {

  const { allDictionary, eachDictionary } = props

  const [state, setState] = useState({})

  const columnsAllDictionary = [
    {
      colKey: 'dictionaryName',
      title: '字典名称',
    },
    {
      colKey: 'dictionaryValue',
      title: '字典值',
    },
  ]

  const columnsEachDictionary = [
    {
      colKey: 'name',
      title: '字典项名称',
    },
    {
      colKey: 'value',
      title: '字典项值',
    },
  ]

  useEffect(() => {

  }, [state])

  return <div className={styles.dictionaryTableComponent}>
    <Table
      className='bm-table'
      data={eachDictionary ? eachDictionary : allDictionary}
      columns={eachDictionary ? columnsEachDictionary : columnsAllDictionary}
      rowKey={'id'}
      verticalAlign={'top'}
      bordered={true}
      showHeader={true}
      tableLayout={'auto'}
      rowClassName={({ rowIndex }) => `${rowIndex}-class`}
      cellEmptyContent={'--'}
      resizable={false}
      size='small'
      pagination={eachDictionary ? {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: eachDictionary.length,
        showJumper: true,
        size: 'small',
      } : {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: allDictionary.length,
        showJumper: true,
        size: 'small',
      }}
      onPageChange={(pageInfo) => {
        console.log(pageInfo, 'onPageChange');
      }}
      onRowClick={({ row, index, e }) => {
        console.log('onRowClick', { row, index, e });
      }}
    />
  </div>
}

export default DictionaryTableComponent
